<template>
  <el-container class="main_con">
    <div class="filter_con ds_block nopt">
      <div class="filter_area">
        <!-- <el-input class="serach_input mr_15 mt_15" v-model="obj.user_name" placeholder="用户名"></el-input> -->
        <label class="mr_15 mt_15">类型</label>
        <el-select
          size="medium"
          v-model="obj.type"
          placeholder="请选择"
          class="mr_15 mt_15"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <label class="mr_15 mt_15">创建时间</label>
        <date-picker
          size="medium"
          @change="getTime"
          class="mr_15 mt_15"
        ></date-picker>
        <el-button size="medium" class="mr_15 mt_15" @click="searchList"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="list_con">
      <el-table :data="list" element-loading-text fit highlight-current-row>
        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
        <!-- <el-table-column type="index" label="序号"></el-table-column> -->

        <el-table-column prop="name" label="商户" width="180"></el-table-column>
        <el-table-column label="用户">
          <template slot-scope="scope">
            <div class="user">
              <div class="face">
                <vimage
                  :src="scope.row.picurl"
                  style="
                    width: 50px;
                    height: 50px;
                    display: block;
                    border-radius: 50%;
                  "
                ></vimage
>
              </div>
              <div class="info">
                <div class="name" :title="scope.row.nickname">
                  {{ scope.row.nickname }}
                </div>
                <div class="source">
                  <i class="weixin el-sc-weixin4"></i>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop label="金额">
          <template slot-scope="scope">
            <span class="add" v-if="scope.row.type == 1"
              >+{{ scope.row.money }}</span
            >
            <span
              class="reduce"
              v-if="scope.row.type == 2 || scope.row.type == 3"
              >-{{ scope.row.money }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="text"> </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
      </el-table>
      <div class="table_footer" v-show="total != 0">
        <el-pagination
          @current-change="changePage"
          :current-page="page"
          class="pages"
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import DatePicker from "@/components/DatePicker/index";
import { getUserMerchantList, delUserCash } from "@/api/mall/finance";
export default {
  data() {
    return {
      options: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: 1,
          label: "下单",
        },
        {
          value: 2,
          label: "退款",
        }
      ],

      obj: {
        type: 0,
        start_time: "",
        end_date: "",
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      list: [],
      listSelected: [],
    };
  },
  components: {
    DatePicker,
  },
  mounted() {
    this.searchList();
  },
  methods: {
    //选择记录
    selectItem(selection) {
      this.listSelected = selection;
    },
    //搜索数据
    searchList() {
      this.objTemp = Object.assign({}, this.obj);
      //处理过滤status字段
      if (this.objTemp.type == -1) {
        delete this.objTemp.type;
      }
      this.page = 1;
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      let data = {
        ...this.objTemp,
        page: this.page,
        size: this.size,
      };
      getUserMerchantList(data).then((res) => {
        console.log(res);
        this.isLoading = false;
        this.list = res.msg.data;
        this.total = res.msg.total;
      });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },
    //获取时间
    getTime(value) {
      this.obj.start_time = value[0];
      this.obj.end_date = value[1];
    },
    //更新单条记录
    editItem(item) {},
    //删除单条记录
    delItem(user_id) {
      this.$confirm("是否确认删除该记录?").then((_) => {
        this.isLoading = true;
        delUserCash(user_id).then((res) => {
          this.isLoading = false;
          this.getDataList();
        });
      });
    },
    //批量删除
    delMul() {
      this.$alert("功能暂未开发!");
    },
  },
};
</script>

<style lang="scss" scoped>
.add {
  color: #ff1f2c;
  font-weight: bold;
}
.reduce {
  color: #19be6b;
  font-weight: bold;
}
.user {
  display: flex;

  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .name {
      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: "ellipsis"; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }

    .source {
      .weixin {
        font-size: 18px;
        color: #333;
      }
    }
  }
}
</style>
